<template>
  <el-dialog
    :close-on-click-modal="true"
    :title="!form.id ? '新增' : '修改'"
    :visible.sync="visible"
    width="800px"
  >
    <el-form ref="form" :model="form" :rules="dataRule" label-width="140px" @keyup.enter.native="formSubmit()">
      <el-form-item label="菜单类型" prop="type">
        <el-radio-group v-model="form.type">
          <el-radio :label="0">一级菜单</el-radio>
          <el-radio :label="1">子菜单</el-radio>
          <el-radio :label="2">按钮</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input v-model="form.name" placeholder="名称" />
      </el-form-item>
      <el-form-item v-if="form.type !== 0" label="父级菜单" prop="parentBy">
        <el-input v-model="form.parentBy" placeholder="父级菜单" />
        <table-tree-select
          v-model="form.parentBy"
          :options="menuOptions"
          :normalizer="normalizer"
          :show-count="true"
          placeholder="选择上级菜单"
        />
      </el-form-item>
      <el-form-item v-if="form.type !== 2" label="路由地址" prop="path">
        <el-input v-model="form.path" placeholder="路由地址" />
      </el-form-item>
      <el-form-item v-if="form.type === 1" label="组件路径" prop="component">
        <el-input v-model="form.url" placeholder="组件路径" />
      </el-form-item>
      <el-form-item v-if="form.type !== 0" label="权限标识" prop="authority">
        <el-input v-model="form.authority" placeholder="权限标识" />
      </el-form-item>
      <el-form-item label="图标" prop="icon">
        <el-input v-model="form.icon" placeholder="图标" />
      </el-form-item>
      <el-form-item label="排序" prop="order">
        <el-input-number v-model="form.order" controls-position="right" :min="0" />
      </el-form-item>
      <el-form-item v-if="form.type !== 2" label="是否隐藏">
        <el-switch v-model="form.hidden" />
      </el-form-item>
      <el-form-item v-if="form.type === 1" label="是否缓存">
        <el-switch v-model="form.keepAlive" />
      </el-form-item>
      <el-form-item v-if="form.type !== 2" label="是否外链">
        <el-switch v-model="form.isExternal" />
      </el-form-item>
      <el-form-item v-if="form.type === 1" label="标签固定">
        <el-switch v-model="form.isAffix" />
      </el-form-item>
      <el-form-item label="是否有效">
        <el-switch v-model="form.status" />
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" type="textarea" rows="3" placeholder="备注" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="formSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      form: {
        id: '',
        parentBy: '',
        name: '',
        path: '',
        component: '',
        authority: '',
        type: 0,
        icon: '',
        order: 0,
        hidden: false,
        keepAlive: false,
        isExternal: false,
        isAffix: false,
        status: true,
        remark: ''
      },
      dataRule: {
        parentBy: [
          { required: true, message: '父级菜单不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '名称不能为空', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '路由地址不能为空', trigger: 'blur' }
        ],
        authority: [
          { required: false, message: '权限标识不能为空', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '菜单类型不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(id) {
      this.form.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
        if (this.form.id) {
          this.$http({
            url: this.$http.adornUrl(`/system/permission/info/${this.form.id}`),
            method: 'get',
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.form.parentBy = data.permission.parentBy
              this.form.name = data.permission.name
              this.form.path = data.permission.path
              this.form.component = data.permission.component
              this.form.authority = data.permission.authority
              this.form.type = data.permission.type
              this.form.icon = data.permission.icon
              this.form.order = data.permission.order
              this.form.orgCode = data.permission.orgCode
              this.form.remark = data.permission.remark
            }
          })
        }
      })
    },
    // 表单提交
    formSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(`/system/permission/${!this.form.id ? 'save' : 'update'}`),
            method: 'post',
            data: this.$http.adornData({
              'id': this.form.id || undefined,
              'parentBy': this.form.parentBy,
              'name': this.form.name,
              'url': this.form.url,
              'authority': this.form.authority,
              'type': this.form.type,
              'icon': this.form.icon,
              'order': this.form.order,
              'createBy': this.form.createBy,
              'createTime': this.form.createTime,
              'updateBy': this.form.updateBy,
              'updateTime': this.form.updateTime,
              'orgCode': this.form.orgCode,
              'remark': this.form.remark
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      })
    }
  }
}
</script>
